<template>
  <div id="login">
      <div class="group_input">
		  <div style="margin-bottom: 10px;">
			  <el-tabs v-model="loginType">
			      <el-tab-pane label="管理员登录" name="1"></el-tab-pane>
			      <el-tab-pane label="用户登录" name="2"></el-tab-pane>
			  </el-tabs>
		  </div>
          <el-input v-model="uname" placeholder="用户名" style="width: 400px"></el-input>
          <br> <br>
          <el-input v-model="upwd" type="password" placeholder="密码" style="width: 400px"></el-input>
          <br> 
		  <!-- <div style="display: flex;justify-content: space-between;padding: 0 10px;">
			  <el-input v-model="code" 
				@input="changeCodeInput"
				placeholder="请输入验证码" style="width: 280px"></el-input>
			  <img :src="imgCodeUrl" @click="getCodeImg()" alt="">
		  </div> -->
		  <br>
          <el-button type="primary" 
			style="width: 400px" 
			@click="login"
			>
			登录
		  </el-button>
		  <!-- 验证码 -->
		<!-- <img src="http://www.tp6.com/index.php/index/verification" alt=""> -->
	  </div>
  </div>
</template>

<script>
 import verify from '@/components/slide-verify'
  export default {
	components:{
		 verify 
	},
    data(){
      return {
          uname:'123',
          upwd:'123',
          loginType:'1',
		  code:'',
		  imgCodeUrl:"",
		  sessionKey:''
      }
    },
    mounted(){
        document.title='回收'
		// this.getCodeImg()
		 // var _self = this
		// document.onkeydown = function() {
		//   var key = window.event.keyCode
		//   if (key === 13) {
		// 	_self.login()
		//   }
		// }
    },
    methods:{
		changeCodeInput(){
			// if(this.code.length==4){
			// 	this.login()
			// }
		},
		getCodeImg(){
			this.imgCodeUrl =`${this.$domain}/index/verification?rand=${Math.random()}`
			this.code = ''
		},
        login(){
			var obj={
			    uname:this.uname,
			    upwd:this.upwd,
				code:this.code,
				sessionKey:this.sessionKey
			}
			if(!this.uname){
			   this.$message.error('请输入用户名')
			   return
			}
			if(!this.upwd){
			   this.$message.error('请输入密码')
			   return
			}
			// if(!this.code){
			//    this.$message.error('请输入验证码')
			//    return
			// }
			const loading = this.$loading({
			  text: '加载中',
			  background: 'rgba(255, 255, 255, 0.1)',
			  spinner: 'el-icon-loading',
			  customClass: 'loadingclass'
			})
			
			if(this.loginType == 1){
				this.axios.post(this.$domain+'/index/login',obj).then(res=>{
					let result = res.data
					if(result.code==200){
						this.$message.success(result.msg)
						sessionStorage.setItem('cid',result.data.cid)
						sessionStorage.setItem('token',result.data.token)
						sessionStorage.setItem('user_name','admin')
						this.$router.push('deskTop/home')
					}else{
						 this.$message.error(result.msg)
						 this.getCodeImg()
					}
					loading.close()
				})
			}else{
				this.axios.post(this.$domain+'/index/userLogin',obj).then(res=>{
					let result = res.data
					if(result.code==200){
						this.$message.success(result.msg)
						sessionStorage.setItem('cid',result.data.cid)
						sessionStorage.setItem('user_name',result.data.uname)
						sessionStorage.setItem('token',result.data.token)
						this.$router.push('deskTop/home')
					}else{
						 this.$message.error(result.msg)
						 this.getCodeImg()
					}
					loading.close()
				})
			}
			
			
     
        }
    },

  }
</script>
<style>
  #login{
        background-image: url(../assets/img/timg1.jpg);
        background-size: cover;
        background-attachment: fixed;
        		width: 100%;
        		height: 100%;
        		position: fixed;
        		top: 0;
        		left: 0;
        		right: 0;
        		bottom: 0;
  }
    #login .group_input{
        width: 500px;
        background: #fff;
        margin: 70px auto;
        border-radius: 4px;
        padding: 20px 40px;
        text-align: center;

    }
</style>